<template lang="html">
  <div class='player'>
    <div class='searchBox'>
      <el-row>
        <el-col :span="18">
          <el-input v-model="playerName" placeholder="请输入召唤师名称" />
        </el-col>
        <el-col :span="5" :offset="1">
           <el-button type="success" plain @click="filterPlayer">搜索</el-button>
        </el-col>
      </el-row>
    </div>
    <div class='box'>
      <div v-if='playerSearchResult.length > 0' class='box2'>
         <div v-for='item in playerSearchResult' class='playerList'>
            <div class='playerImg'>
              <img :src="TGPICON + item.icon_id + '.png'" />
            </div>
            <div class='playerMsg'>
              <p>{{ item.name | name }}</p>
              <p>
                {{ item.area_id | areaName}}
                <span class="level">等级:{{ item.level }} 级</span>
              </p>
            </div>
         </div>
          <div class="pagination">
           <el-pagination
              @current-change="handleCurrentChange"
              :page-size="10"
              layout="prev, pager, next, jumper"
              :total="defaultFilterPlayerList.length"
              :current-page="page"
              background
              small
           >
           </el-pagination>
         </div>
      </div>
      <div v-else class="noResult">
        <img src="http://o9xap42x4.bkt.clouddn.com/empty1.png" alt="">
        <p>很抱歉, 撸撸君暂没有为您查询出数据哦.........</p>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions, mapMutations } from 'vuex';
import { name, areaName } from '@/filters';

const TGPICON = 'http://cdn.tgp.qq.com/lol/images/resources/usericon/';

export default {
  data: () => ({
    playerName: '',
    loading: null,
    TGPICON,
    page: 1,
  }),
  created() {
    this.$confirm('由于没有正式接口，自己采用easy mock模拟数据，' +
    '会随机生成200 - 1000条召唤师id，等级，大区随机选取filter中相应数据的列表', '提示', {
      confirmButtonText: '还是生成吧',
      cancelButtonText: '生成吧',
      type: 'warning',
    }).then(() => {
      this.searchPlayer(1, true);
    }).catch(() => {
      this.searchPlayer(1, true);
    });
  },
  destroyed() {
    this.emptyPlayerList();
  },
  filters: {
    name,
    areaName,
  },
  computed: {
    ...mapState(['playerSearchResult', 'defaultPlayerSearchResult', 'defaultFilterPlayerList']),
  },
  methods: {
    showLoading(text) {
      this.loading = this.$loading({
        lock: true,
        text,
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      });
    },
    ...mapActions(['searchPlayerResult']),
    ...mapMutations(['filterPlayerList', 'emptyPlayerList']),
    searchPlayer(page, notPageChange) {
      this.showLoading('努力搜索中.....');
      this.searchPlayerResult({ page, notPageChange }).then(() => {
        this.loading.close();
        this.page = page;
      }).catch((err) => {
        this.loading.close();
        this.$alert(err.errorMsg || '网络摔了一跤，等下再来吧', '获取信息失败', {
          confirmButtonText: '确定',
          type: 'error',
          callback: () => false,
        });
      });
    },
    filterPlayer() {
      this.page = 1;
      this.filterPlayerList({ name: this.playerName });
    },
    handleCurrentChange(page) {
      this.searchPlayer(page, false);
    },
  },
};
</script>

<style lang="css" scoped>
 .searchBox{
   padding-bottom: 15px;
   background-color: #03a9f4;
   padding: 5px;
 }
 .pagination {
   padding-top: 20px;
   padding-bottom: 10px;
 }
 .noResult{
    text-align: center;
    margin-top: 50px;
  }
  .noResult p{
    color:#26A2FF;
    margin-top: 20px;
  }
  .box2{
    background-color: #f0f0f0;
    margin-bottom: 47px;
    padding-bottom: 5px;
  }
  .playerList{
    padding: 10px;
    background: #fff;
    margin-bottom: 5px;
  }
  .playerList:last-child{
      margin-bottom: 0px;
  }
  .playerImg,.playerMsg{
    display: inline-block;
    vertical-align: middle;
  }
  .playerImg{
    width: 90px;
    height: 65px;
  }
  .playerMsg{
    width: 250px;
    margin-left: 10px;
  }
  .level {
    color: orange;
  }
</style>
